<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hi-dialect</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
</head>

<body>

    <!-- Page loading -->
    <div class="loading">
        <div class="spinner-grow"></div>
    </div>
    <!-- * Page loading -->

    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="javascript:;" class="icon goBack">
                <i class="icon ion-ios-arrow-back"></i>
            </a>
        </div>
        <div class="pageTitle">动态</div>
        <div class="right">
            <label for="searchInput" class="mb-0 icon toggleSearchbox">
                <i class="icon ion-ios-search"></i>
            </label>
        </div>
    </div>
    <!-- searchBox -->
    <div class="searchBox">
        <form>
            <span class="inputIcon">
                <i class="icon ion-ios-search"></i>
            </span>
            <input type="text" class="form-control" id="searchInput" placeholder="请输入...">
            <a href="javascript:;" class="toggleSearchbox closeButton">
                <i class="icon ion-ios-close-circle"></i>
            </a>
        </form>
    </div>
    <!-- * searchBox -->
    <!-- * App Header -->

    <!-- App Capsule -->
    <div id="appCapsule">

        <div class="appContent">

            <!-- Button Carousel -->
            <div class="buttonCarousel owl-carousel mt-2 mb-2">
                <div class="item active">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/avatar.jpg" alt="image">
                        </div>
                        <strong>胖大海</strong>
                    </a>
                </div>
                <div class="item active">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/avatar2.jpg" alt="image">
                        </div>
                        <strong>小团</strong>
                    </a>
                </div>
                <div class="item active">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/avatar3.jpg" alt="image">
                        </div>
                        <strong>逛吃在西安</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/avatar4.jpg" alt="image">
                        </div>
                        <strong>陕西斌马永</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/avatar5.jpg" alt="image">
                        </div>
                        <strong>阎王</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/avatar6.jpg" alt="image">
                        </div>
                        <strong>秋风</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/avatar7.jpg" alt="image">
                        </div>
                        <strong>皇城四合院</strong>
                    </a>
                </div>
            </div>
            <!-- Button Carousel -->


            <!-- post -->
            <div class="photoPost">
                <header>
                    <div class="user">
                        <a href="social-profile.html">
                            <img src="img/sample/avatar3.jpg" alt="avatar" class="avatar">
                            <strong>胖将军</strong>
                        </a>
                    </div>
                    <div class="right">
                        <div class="lead">5分钟前</div>
                    </div>
                </header>
                <div class="image">
                    <a href="social-post.html">
                        <img src="img/sample/photo8.jpg" alt="photo" class="img-fluid">
                    </a>
                </div>
                <footer class="row">
                    <div class="col-8">
                        <button class="btn btn-sm mr-2"><i class="icon ion-ios-heart text-danger"></i>52</button>
                        <button class="btn btn-sm"><i class="icon ion-ios-text text-primary"></i>3</button>
                    </div>
                    <div class="col-4 text-right">
                        <button class="btn btn-sm mr-2"><i class="icon ion-ios-bookmark text-secondary"></i></button>
                        <button class="btn btn-sm"><i class="icon ion-ios-share-alt text-secondary"></i></button>
                    </div>
                </footer>
            </div>
            <!-- post -->

            <div class="divider mt-2 mb-2"></div>

            <!-- post -->
            <div class="photoPost">
                <header>
                    <div class="user">
                        <a href="social-profile.html">
                            <img src="img/sample/avatar.jpg" alt="avatar" class="avatar">
                            <strong>早知道就这样如梦一场</strong>
                        </a>
                    </div>
                    <div class="right">
                        <div class="lead">22分钟前</div>
                    </div>
                </header>
                <div class="image">
                    <a href="social-post.html">
                        <img src="img/sample/photo10.jpg" alt="photo" class="img-fluid">
                    </a>
                </div>
                <footer class="row">
                    <div class="col-8">
                        <button class="btn btn-sm mr-2"><i class="icon ion-ios-heart text-danger"></i>1.2k</button>
                        <button class="btn btn-sm"><i class="icon ion-ios-text text-primary"></i>521</button>
                    </div>
                    <div class="col-4 text-right">
                        <button class="btn btn-sm mr-2"><i class="icon ion-ios-bookmark text-secondary"></i></button>
                        <button class="btn btn-sm"><i class="icon ion-ios-share-alt text-secondary"></i></button>
                    </div>
                </footer>
            </div>
            <!-- post -->

            <div class="divider mt-2 mb-2"></div>

            <!-- post -->
            <div class="photoPost">
                <header>
                    <div class="user">
                        <a href="social-profile.html">
                            <img src="img/sample/avatar4.jpg" alt="avatar" class="avatar">
                            <strong>先行者</strong>
                        </a>
                    </div>
                    <div class="right">
                        <div class="lead">3天前</div>
                    </div>
                </header>
                <div class="image">
                    <a href="social-post.html">
                        <img src="img/sample/photo13.jpg" alt="photo" class="img-fluid">
                    </a>
                </div>
                <footer class="row">
                    <div class="col-8">
                        <button class="btn btn-sm mr-2"><i class="icon ion-ios-heart text-danger"></i>2</button>
                        <button class="btn btn-sm"><i class="icon ion-ios-text text-primary"></i>7</button>
                    </div>
                    <div class="col-4 text-right">
                        <button class="btn btn-sm mr-2"><i class="icon ion-ios-bookmark text-secondary"></i></button>
                        <button class="btn btn-sm"><i class="icon ion-ios-share-alt text-secondary"></i></button>
                    </div>
                </footer>
            </div>
            <!-- post -->

            <div class="divider mt-2 mb-2"></div>

            <!-- post -->
            <div class="photoPost">
                <header>
                    <div class="user">
                        <a href="social-profile.html">
                            <img src="img/sample/avatar6.jpg" alt="avatar" class="avatar">
                            <strong>钢铁侠</strong>
                        </a>
                    </div>
                    <div class="right">
                        <div class="lead">5天前</div>
                    </div>
                </header>
                <div class="image">
                    <a href="social-post.html">
                        <img src="img/sample/photo14.jpg" alt="photo" class="img-fluid">
                    </a>
                </div>
                <footer class="row">
                    <div class="col-8">
                        <button class="btn btn-sm mr-2"><i class="icon ion-ios-heart text-danger"></i>35</button>
                        <button class="btn btn-sm"><i class="icon ion-ios-text text-primary"></i>210</button>
                    </div>
                    <div class="col-4 text-right">
                        <button class="btn btn-sm mr-2"><i class="icon ion-ios-bookmark text-secondary"></i></button>
                        <button class="btn btn-sm"><i class="icon ion-ios-share-alt text-secondary"></i></button>
                    </div>
                </footer>
            </div>
            <!-- post -->


        </div>

    </div>
    <!-- appCapsule -->


    <!-- App Bottom Menu -->
    <div class="appBottomMenu">
        <div class="item ">
            <a href="homepage.html">
                <p>
                    <i class="icon ion-ios-water"></i>
                    <span>首页</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="activitiy-main.html">
                <p>
                    <i class="icon ion-ios-apps"></i>
                    <span>活动</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="tools.html">
                <p>
                    <i class="icon ion-ios-add-circle"></i>
                    <span>工具</span>
                </p>
            </a>
        </div>
        <div class="item active">
            <a href="social-home.html">
                <p>
                    <i class="icon ion-ios-aperture"></i>
                    <span>动态</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="people-info.html">
                <p>
                    <i class="icon ion-ios-person"></i>
                    <span>我的</span>
                </p>
            </a>
        </div>
    </div>
    <!-- * App Bottom Menu -->

    <!-- Sidebar Menu -->
    <div class="sidebarWrapper">
        <div class="overlay toggleSidebar"></div>
        <nav class="sidebar">
            <div class="profilebox">
                <img src="img/sample/avatar.jpg" alt="avatar" class="avatar">
                <h2 class="title">醒了很久还是很感动</h2>
                <h5 class="lead">
                    <i class="icon ion-ios-pin mr-1"></i>
                    浙江省杭州市
                </h5>
                <div class="button">
                    <a href="#">
                        <i class="icon ion-ios-settings"></i>
                    </a>
                </div>
            </div>
            <div class="sidebarGroup">
                <ul class="sidebarMenu">
                    <li>
                        <a href="social-home.html">
                            <i class="icon ion-ios-people"></i>
                            动态
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <i class="icon ion-ios-chatboxes"></i>
                            消息
                        </a>
                    </li>
                    <li>
                        <a href="activitiy-list.html">
                            <i class="icon ion-ios-apps"></i>
                            活动
                        </a>
                    </li>
                    <li>
                        <a href="people-info.html">
                            <i class="icon ion-ios-book"></i>
                            信息
                        </a>
                    </li>
                    <li>
                        <a href="page-login.html">
                            <i class="icon ion-ios-lock"></i>
                            登出
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sidebarGroup">
                <ul class="sidebarMenu">
                    <li class="title">在线</li>
                    <li>
                        <a href="social-chat.html">
                            <img src="img/sample/avatar2.jpg" alt="avatar" class="avatar">
                            胖大海
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <img src="img/sample/avatar3.jpg" alt="avatar" class="avatar">
                            佛山菩提
                            <span class="badge badge-primary">2</span>
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <img src="img/sample/avatar4.jpg" alt="avatar" class="avatar">
                            刘小佳
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <img src="img/sample/avatar5.jpg" alt="avatar" class="avatar">
                            张铁柱
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <img src="img/sample/avatar6.jpg" alt="avatar" class="avatar">
                            方言小李
                        </a>
                    </li>
                </ul>
            </div>

        </nav>
    </div>
    <!-- * Sidebar Menu -->

   <!-- ///////////// Js Files ////////////////////  -->
    <!-- Jquery -->
    <script src="js/lib/jquery-3.4.1.min.js"></script>
    <!-- Bootstrap-->
    <script src="js/lib/popper.min.js"></script>
    <script src="js/lib/bootstrap.min.js"></script>
    <!-- Owl Carousel -->
    <script src="js/plugins/owl.carousel.min.js"></script>
    <!-- Main Js File -->
    <script src="js/app.js"></script>


</body>

</html>
